<template>
    <el-dialog
      v-model="innerVisible"
      title="重新绑定容器编码"
      :width="isLargeScreen ? '50%' : '600px'"
      :before-close="handleCancel"
      :close-on-click-modal="false"
    >
      <el-form size="large" label-width="120px">
        <el-form-item label="任务编号：">
          <el-input 
            :model-value="taskNumber" 
            disabled 
            :style="{ fontSize: '16px' }"
          ></el-input>
        </el-form-item>
  
        <el-form-item label="旧托盘号：">
          <el-input 
            :model-value="oldBoxNumber" 
            disabled 
            :style="{ fontSize: '16px' }"
          ></el-input>
        </el-form-item>
  
        <el-form-item 
          label="新托盘号："
          :error="inputError"
          :validate-status="inputInvalid ? 'error' : ''"
        >
          <el-input 
            v-model="newBoxNumber"
            placeholder="请输入新托盘号"
            @input="validateInput"
            :style="{ fontSize: '16px' }"
          ></el-input>
          <div class="input-hint">
            注意:请输入APxxx或者直接输入数字，例如：AP001或者1
          </div>
        </el-form-item>
      </el-form>
  
      <template #footer>
        <el-button size="large" @click="handleCancel">取消</el-button>
        <el-button 
          size="large" 
          type="primary" 
          @click="handleConfirm"
          :disabled="!isInputValid"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, computed, defineProps, onMounted, defineExpose } from 'vue';
  
  // 仅接收业务数据，不接收显示状态
  const props = defineProps({
    taskNumber: {
      type: String,
      required: true
    },
    oldBoxNumber: {
      type: String,
      required: true
    }
  });
  
  // 内部完全控制显示状态
  const innerVisible = ref(false);
  const newBoxNumber = ref('');
  const inputInvalid = ref(false);
  const inputError = ref('');
  const isLargeScreen = ref(false);
  import request,{ downFile } from '@/utils/request'
  // 大屏适配
  const checkScreenSize = () => {
    isLargeScreen.value = window.innerWidth >= 1920;
  };
  onMounted(() => {
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
  });
  const { proxy } = getCurrentInstance()
  // 输入验证
  const validateInput = () => {
    const regex = /^(AP\d+|\d+)$/;
    const val = newBoxNumber.value.trim();
    inputInvalid.value = val && !regex.test(val);
    inputError.value = inputInvalid.value ? '格式不正确，请重新输入' : '';
  };
  
  const isInputValid = computed(() => {
    return !inputInvalid.value && newBoxNumber.value.trim();
  });
  
  // 对外暴露的方法：显示弹框
  const show = () => {
    innerVisible.value = true;
    // 重置输入（避免上次残留）
    newBoxNumber.value = '';
    inputInvalid.value = false;
    inputError.value = '';
  };
  
  // 确定按钮逻辑
  const handleConfirm = async () => {
    if (!isInputValid.value) return;
    try {

        const body = { 
            containerNo:newBoxNumber.value,
            taskNo:props.taskNumber
          }
        //制作后台接口
        const res = await request({
            url: `/api/packagingtask/rebind`,
            method: 'post',
            data: body
        })
        proxy.$modal.loading('执行中')
        await new Promise(resolve => setTimeout(resolve, 700));
        proxy.$modal.closeLoading()
        innerVisible.value = false;
        proxy.$modal.alertSuccess('操作成功')

      // 接口调用代码
      // await api.rebind({
      //   taskNumber: props.taskNumber,
      //   oldBoxNumber: props.oldBoxNumber,
      //   newBoxNumber: newBoxNumber.value.trim()
      // });
    } catch (err) {
      console.error('接口错误', err);
    } finally {
     
    }
  };
  
  // 取消按钮逻辑
  const handleCancel = () => {
    innerVisible.value = false;
  };
  
  // 关键：暴露show方法给父组件调用
  defineExpose({ show });
  </script>
  
  <style scoped>
  .input-hint {
    margin-top: 8px;
    font-size: 14px;
    color: #606266;
  }
  :deep(.el-dialog__title) { font-size: 20px; }
  :deep(.el-dialog__body) { padding: 30px 40px; }
  </style>